<!--
 * @Author: Mr.Cong Wei
 * @Date: 2022-06-20 11:28:20
 * @LastEditTime: 2022-06-20 14:51:38
-->
<!-- 弹窗模板 -->
<template>
  <a-modal
    v-model:visible="inputV"
    wrap-class-name="module-class modal-components"
    destroy-on-close
    :footer="null"
    @cancel="cancel"
  >
    <template #title>
      <div class="flex items-center h-[60px] pl-[40px] themeBGC">
        <div class="relative mt-[8px] w-[30px] h-[23px]">
          <slot name="title-icon">
            <ModalHeaderIcon />
          </slot>
        </div>
        <span class="text-xl focusTC pl-2">
          <slot name="title-content"> {{ title }} </slot>
        </span>
      </div>
    </template>
    <template #closeIcon>
      <close-circle-outlined class="clickTC text-[30px]" />
    </template>
    <slot name="body" />
  </a-modal>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ModalHeaderIcon } from './icon'
/**
 * show:Boolean                 是否显示弹窗  v-model:show="Visible"
 * ttile:String                 弹窗标题
 *
 * @cancelHandle:Function       关闭时触发事件
 *
 * v-slot:title-icon            弹窗标题图标
 * v-slot:title-content         弹窗标题内容
 *
 * v-slot:body                  弹窗主体
 *
 * */

/**
 * 组件定义
 */
const props = withDefaults(
  defineProps<{
    show: boolean
    title: string
  }>(),
  {}
)

const emits = defineEmits<{
  (e: 'update:show', value: boolean): void
  (e: 'cancelHandle', value: any): void
}>()

/**
 * 事件响应
 */
const cancel = () => {
  emits('update:show', false)
  emits('cancelHandle', false)
}

/**
 * 响应式变量
 */
const inputV = computed({
  get() {
    return props.show
  },
  set(value) {
    emits('update:show', value)
    emits('cancelHandle', value)
  }
})
</script>

<style lang="scss">
body .module-class .ant-modal-header {
  padding: 0;
}
body .module-class .ant-modal-body {
  position: relative;
  padding: 0;
}

body .detail-class .ant-modal-body {
  overflow: auto;
  padding: 0 0 30px 0;
}

.ant-scrolling-effect {
  width: 100% !important;
}
/* 组件模态框 */
body .module-class.modal-components .ant-modal {
  top: 5%;
  left: 0px;
  margin-left: 5%;
  margin-right: 5%;
  height: 90%;
  width: auto !important;
}
body .module-class.modal-components .ant-modal .ant-modal-content {
  height: 100%;
}
body .module-class .ant-modal-content {
  box-sizing: border-box;
  border-radius: 10px;
  overflow: hidden;
  /* border: 5px solid #f1f1f1; */
}
body .module-class.modal-components .ant-modal .ant-modal-content .ant-modal-body {
  height: 90%;
  overflow-y: auto;
}
body .module-class.modal-components .ant-modal .ant-modal-content .ant-modal-body::-webkit-scrollbar {
  width: 15px;
  height: 20px;
}
body .module-class.modal-components .ant-modal .ant-modal-content .ant-modal-body::-webkit-scrollbar-track {
  border-radius: 100vh;
  background: #f7f4ed;
}
body .module-class.modal-components .ant-modal .ant-modal-content .ant-modal-body::-webkit-scrollbar-thumb {
  background: #e0cbcb;
  border-radius: 100vh;
  border: 3px solid #f6f7ed;
}
body .module-class.modal-components .ant-modal .ant-modal-content .ant-modal-body::-webkit-scrollbar-thumb:hover {
  background: #c0a0b9;
}
</style>
